<template>
  <span>
    <el-date-picker
      v-if="multiple"
      v-model="innerDateRange"
      :style="$attrs['content-style']"
      :type="type + 'range'"
      :value-format="$attrs['value-format']"
      range-separator="-"
      :start-placeholder="$attrs['start-placeholder'] || '开始日期'"
      :end-placeholder="$attrs['end-placeholder'] || '结束日期'"
      :picker-options="$attrs['picker-options'] || innerPickerOptions"
    ></el-date-picker>
    <span v-else>
      <el-date-picker
        type="date"
        v-model="innerDateRange[0]"
        :value-format="$attrs['value-format']"
        :start-placeholder="$attrs['start-placeholder'] || '开始日期'"
        placeholder="开始时间"
        :picker-options="pickerOptions1"
        :clearable="false"
      >
    </el-date-picker>
        -
      <el-date-picker
        type="date"
        v-model="innerDateRange[1]"
        :value-format="$attrs['value-format']"
        :end-placeholder="$attrs['end-placeholder'] || '结束日期'"
        placeholder="结束时间"
        :pickerOptions="pickerOptions2"
        :clearable="false"
      >
    </el-date-picker>
    </span>
  </span>
</template>
<script>


export default {
  name: 'DateRangePicker',
  props: {
    value: Object,
    type: {
      type: String,
      default: 'date'
    },
   /*  startPickerName: {
      type: String,
      default: 'startDate'
    },
    endPickerName: {
      type: String,
      default: 'endTime'
    }, */
    startPickerName: {
      type: String,
      default: 'startDate'
    },
    endPickerName: {
      type: String,
      default: 'endDate'
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerDateRange: [],
      innerPickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      pickerOptions1: {
        disabledDate: (date) => {
          return this.innerDateRange[1] ? new Date(this.innerDateRange[1]).getTime() < date.getTime() : false
        }
      },
      pickerOptions2: {
        disabledDate: (date) => {
          return this.innerDateRange[0] ? new Date(this.innerDateRange[0]).getTime() > date.getTime() : false
        }
      }
    }
  },
  watch: {
    innerDateRange(newData) {
      this.value[this.startPickerName] = this.innerDateRange[0]
      this.value[this.endPickerName] = this.innerDateRange[1]
      this.$emit('input', this.value)
    },
    value: {
      handler(value) {
        if (value[this.startPickerName] || value[this.endPickerName]) {
          this.innerDateRange = [value[this.startPickerName], value[this.endPickerName]]
        } else {
          this.innerDateRange = []
        }

      },
      immediate: true
    }
  }
}
</script>
